import React from 'react';
import ReactDOM from 'react-dom'
import qqq  from 'prop-types'
// class Counter extends React.Component{
//   // static propTypes = {

//   // }
//   render(){
//     return <>
//       <h1>当前数字是{this.props.count}</h1>
//       <button onClick={this.props.onClick123.bind(null,100)}>儿子改count</button>
//     </>
//   }
// }
function Counter(props){
  console.log('child render')
  return <>
    <h1>当前数字是{props.count||200}</h1>
    <button onClick={props.onClick123.bind(null,100)}>儿子改count</button>
  </>
}
// propTypes是一个静态属性  用来限制 父传子的数据类型；
Counter.propTypes = {
  count:qqq.string,
  // name:propTypes.string.isRequired
  onClick123:qqq.func
}
// defaultProps 也是一个静态属性； 用来给默认值的
// Counter.defaultProps = {
//   count:200
// }

class App extends React.Component {
    state = {count:100}
    add= (n=1)=>{
      this.setState({
        count:this.state.count + n
      })
    }
    render() {
        console.log('app redner')
        return <div className=''>
          <Counter count={this.state.count} onClick123={this.add}/>
          <button onClick={this.add.bind(this,1)}>+</button>
        </div>;
    }
}
ReactDOM.render(<App/>,document.getElementById('root'))